import React, { Component } from "react";
import { 
  Image,
  StyleSheet,
  Alert,
  Button,
  Text,
  View,
  ImageBackground,
  Dimensions,
  ScrollView,
  SafeAreaView,
  TouchableOpacity,
  // NativeModules,
  // NativeEventEmitter,
  // DeviceEventEmitter
} from 'react-native';

// function Name(props) {
//     return <h1>网站名称：{props.name}</h1>;
// }
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

export default class PageFM extends Component {
  // static navigationOptions = ({ navigation }) => {
  //   return {
  //     title: navigation.state.params.title,
  //   };
  // };
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false
    }
    this.saveBt = this.saveBt.bind(this);
    this.gobackBt = this.gobackBt.bind(this);
  }

  componentDidMount() {
  }

  saveBt() {
    console.log('保存用户设置')
    // 发送指令
  }
  gobackBt() {
    console.log('返回主页')
    this.props.navigation.goBack()
    // this.props.navigation.navigate('Main')
  }

  render() {
    return (
      // <View>
      //   <Text>{this.props.navigation.state.params.title}</Text>
      //   <Text onPress={() => this.props.navigation.navigate('Main')}>点击跳转主页面</Text>
      //   <Text onPress={() => this.props.navigation.goBack()}>点击返回</Text>
      // </View>
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView contentContainerStyle={{ height: SCREEN_HEIGHT }}>
          <ImageBackground source={require('../assets/bg1.png')} style={styles.bgImage}>
            <View style={styles.header}>
              <View style={{ width: 70 }}>
                <TouchableOpacity onPress={this.gobackBt}>
                  <Image
                    source={require('../assets/icon_left.png')}
                    style={{ width:11, height:19, marginLeft:14 }}
                  />
                </TouchableOpacity>
              </View>
              <View style={{ flex: 1, alignItems: 'center' }}>
                <Text style={{ fontSize: 20, color:'#fff' } }>蓝牙设置</Text>
              </View>
              <View style={{ width: 60 }}>
                <TouchableOpacity onPress={this.saveBt} style={styles.btn}>
                  <Text style={styles.btn_text}>保存</Text>
                </TouchableOpacity>
              </View>
              <View style={{ width: 10 }}>
              </View>
            </View>
            <View style={{ marginTop: 60, alignItems: 'center' }}>
              <Text style={{ fontSize: 40, color:'#fff' } }>93.5Hz</Text>
              {/* <Image
                source={require('../assets/edit.png')}
                style={{ width: 20, height:20, marginTop:10 }}/> */}
            </View>
            <View style={styles.info_container}>
              <Image
                source={require('../assets/icon_minus.png')}
                style={{ width: 32, height: 32 }}/>
              <Image
                source={require('../assets/icon_add.png')}
                style={{ width: 32, height: 32 }}/>
            </View>
          </ImageBackground>
              {/* <View>
                <TouchableOpacity onPress={this.mainBt}>
                  <Image
                    source={this.state.mainBtnSrc}
                    style={{ width:80, height:80, marginTop:30 }}
                  />
                </TouchableOpacity>
              </View>  */}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

var styles = StyleSheet.create({
  bgImage: {
    flex: 1,
    width: SCREEN_WIDTH,
    height: 320,
    // justifyContent: 'center',
    // alignItems: 'center',
    // backgroundColor: '#F6F6F6',
  },
  top: {
    width: SCREEN_WIDTH,
    height: 320,
    backgroundColor: '#87CEFA'
  },
  header: {
    flexDirection: 'row',
    width: SCREEN_WIDTH,
    marginTop:33,
    justifyContent: 'center',
  },
  btn: {
    width: 55,
    height: 30,
    backgroundColor: '#fff',
    borderRadius: 3,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btn_text: {
    fontSize: 16,
    color: '#1E90FF'
  },
  info_container: {
    marginLeft: 40,
    marginRight: 40,
    marginTop: 50,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  info: {
    fontSize: 18,
    marginLeft: 5,
    color: '#fff'
  }
});